<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
		<title>详情页</title>

		<style type="text/css">
			body,
			html {
				overflow-x: hidden;
			}

			header {
				color: #FFFFFF;
				background: -webkit-linear-gradient(left top, #0F9BEB, #1569C8);
				/* Safari 5.1 - 6.0 */
				background: -o-linear-gradient(bottom right, #0F9BEB, #1569C8);
				/* Opera 11.1 - 12.0 */
				background: -moz-linear-gradient(bottom right, #0F9BEB, #1569C8);
				/* Firefox 3.6 - 15 */
				background: linear-gradient(to bottom right, #0F9BEB, #1569C8);
				background: -webkit-linear-gradient(left top, #0F9BEB, #1569C8);
				/* 标准的语法*/
				box-shadow: 0 0px 7px #0c5ebb;
			}

			.aui-bar-nav {
				height: 3.2rem;
				line-height: 3.2rem;
				background-color: #03a9f4;
				color: #ffffff;
			}

			section.aui-content.user-info.aui-margin-b-15 {
				background-color: #FFFFFF !important;
			}

			ul.aui-list-header {
				background-color: #FFFFFF !important;
				position: relative;
				overflow: hidden;
				margin: 50px 20px 30px 20px;
			}

			span.list-title {
				font-size: 18px;
				color: #000000;
				margin-right: 10px;
				padding: 4px 0;
			}

			span.list-comment {
				font-size: 12px;
				color: #999999 !important;
				margin-right: 10px;
			}

			a.list-btn1 {
				float: right;
				display: inline-block;
				border-radius: 5px;
				color: #FFFFFF;
				background: -webkit-linear-gradient(left top, #0F9BEB, #1569C8) !important;
				/* Safari 5.1 - 6.0 */
				background: -o-linear-gradient(bottom right, #0F9BEB, #1569C8) !important;
				/* Opera 11.1 - 12.0 */
				background: -moz-linear-gradient(bottom right, #0F9BEB, #1569C8) !important;
				/* Firefox 3.6 - 15 */
				background: linear-gradient(to bottom right, #0F9BEB, #1569C8) !important;
				background: -webkit-linear-gradient(left top, #0F9BEB, #1569C8) !important;
				border: 2px solid #1569C8;
				padding: 5px 25px;
				margin-left: 10px;
				box-shadow: 0 2px 3px #0o5ebb;
			}
			a.list-btn2 {
				float: right;
				display: inline-block;
				border-radius: 5px;
				color: #1569C8;
				background: #FFFFFF !important;
				border: 2px solid #1569C8;
				padding: 5px 25px;
				margin-left: 10px;
				box-shadow: 0 2px 3px #0o5ebb;
			}

			.aui-btn {
				width: 80%;
				border: 1px solid #FFFFFF;
				color: #999999;
				background-color: #f4f5f7;
				height: 1.75rem;
				line-height: 1.75rem;
			}
			.aui-btn-active {
				width: 80%;
				border: 1px solid #000000;
				color: #000000;
				height: 1.75rem;
				line-height: 1.75rem;
				background-color: #f4f5f7 !important;
			}

			li.aui-col-xs-3 {
				text-align: center;
				margin: 5px auto;
			}

			/*清除aui.css干扰*/
			.aui-margin-b-15 {
				margin-bottom: 0rem !important;
				background-color: #FFFFFF !important;
			}

			.btn-up {
				position: absolute;
				width: 100%;
				bottom: 21px;
				text-align: -webkit-center;
			}

			.btn-up img {
				display: inline-block !important;
				width: 1.25rem !important;
			}





		</style>

	</head>

	<body onload="selectAll()">
		<header class="aui-bar aui-bar-nav">

			<div class="aui-title">KKTOKEN</div>
		</header>

		<!--内容选择区块-->
		<section class="aui-content user-info aui-margin-b-15">
			<ul class="aui-list-header">
				<span class="list-title">
					频道顺序
				</span>
				<span class="list-comment">
					点击编辑可排列先后
				</span>
				<a class="list-btn1" id="btn1" attr-status=t rue>
					编&nbsp;辑
				</a>
			</ul>

			<ul class="aui-card-list-content-padded" id="items">

				<li class="aui-col-xs-3">
					<div class="aui-btn">自选</div>
				</li>
				<li class="aui-col-xs-3">
					<div class="aui-btn">全部</div>
				</li>
				<li class="aui-col-xs-3">
					<div class="aui-btn">涨幅</div>
				</li>
				<li class="aui-col-xs-3">
					<div class="aui-btn">BTC</div>
				</li>
				<li class="aui-col-xs-3">
					<div class="aui-btn">ETH</div>
				</li>
				<li class="aui-col-xs-3">
					<div class="aui-btn">全部</div>
				</li>
				<li class="aui-col-xs-3">
					<div class="aui-btn">涨幅</div>
				</li>
				<li class="aui-col-xs-3">
					<div class="aui-btn">BTC</div>
				</li>
				<li class="aui-col-xs-3">
					<div class="aui-btn">ETH</div>
				</li>
				<li class="aui-col-xs-3">
					<div class="aui-btn">全部</div>
				</li>
				<li class="aui-col-xs-3">
					<div class="aui-btn">涨幅</div>
				</li>
				<li class="aui-col-xs-3">
					<div class="aui-btn">BTC</div>
				</li>
				<li class="aui-col-xs-3">
					<div class="aui-btn">ETH</div>
				</li>
				<li class="aui-col-xs-3">
					<div class="aui-btn">全部</div>
				</li>
				<li class="aui-col-xs-3">
					<div class="aui-btn">涨幅</div>
				</li>
				<li class="aui-col-xs-3">
					<div class="aui-btn">BTC</div>
				</li>
			</ul>
		</section>
		<a class="btn-up">
			<img src="../../image/btn/nav_btn_sq@2x.png" />
		</a>
	</body>
	<script src="../../script/api.js" type="text/javascript" charset="utf-8"></script>
	<!--<script type="text/javascript" src="../../script/aui-sharebox.js"></script>-->
	<script src="../../script/Sortable.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">

		//点击"编辑"按钮
		function selectAll() {
			for(var i = 0; i < document.getElementById("items").childNodes.length; i++) {
				btn1.onclick = function() {
					this.className = (this.className == "list-btn2" ? "list-btn1" : "list-btn2");
					this.innerHTML = (this.innerHTML == "完&nbsp;成" ? "编&nbsp;辑" : "完&nbsp;成");
					$('ul li div').toggleClass('aui-btn-active')
				}

			}
		}

		//拖拽排序 使用sortable插件
		var el = document.getElementById("items");
		new Sortable(el);
		//		开始排序
		new Sortable(el, {
			group: "name",
			store: null, //
			handle: ".my-handle", // 点击目标元素约束开始
			draggable: ".item", // 指定那些选项需要排序
			ghostClass: "sortable-ghost",

			onStart: function( /**Event*/ evt) { // 拖拽
				var itemEl = evt.item;
			},

			onEnd: function( /**Event*/ evt) { // 拖拽
				var itemEl = evt.item;
			},

			onAdd: function( /**Event*/ evt) {
				var itemEl = evt.item;
			},

			onUpdate: function( /**Event*/ evt) {
				var itemEl = evt.item; // 当前拖拽的html元素
			},

			onRemove: function( /**Event*/ evt) {
				var itemEl = evt.item;
			}
		});

	</script>

</html>
